<!doctype html>
<html lang="en">
<body>
<style>
	object {
		visibility: hidden;
		height: 0px;
		width: 0px;
	}
</style>
<object data="actions.svg" type="image/svg+xml"></object>
<object data="alert.svg" type="image/svg+xml"></object>
<object data="av.svg" type="image/svg+xml"></object>
<object data="communication.svg" type="image/svg+xml"></object>
<object data="content.svg" type="image/svg+xml"></object>
<object data="device.svg" type="image/svg+xml"></object>
<object data="editor.svg" type="image/svg+xml"></object>
<object data="file.svg" type="image/svg+xml"></object>
<object data="hardware.svg" type="image/svg+xml"></object>
<object data="image.svg" type="image/svg+xml"></object>
<object data="maps.svg" type="image/svg+xml"></object>
<object data="navigation.svg" type="image/svg+xml"></object>
<object data="notification.svg" type="image/svg+xml"></object>
<object data="places.svg" type="image/svg+xml"></object>
<object data="social.svg" type="image/svg+xml"></object>

<p>Write the content of this textarea to file iconset-full.ts</p>
<textarea id="result" style="width: 100%; height:200px;"></textarea>

<script>
	const resultArea = document.getElementById('result');
	resultArea.value = "import { SvgIconSet } from './index';export const ICON_SET: SvgIconSet = {";
	const source = document.getElementsByTagName('object');
	let counter = 0;

	const retrievePaths = function(object) {
		counter++;
		const icons = object.contentDocument.firstElementChild.getElementsByTagName('svg');
		
		// All the id in the doc follow this format
		const regex = /ic_(.*)_24px/;
		// We want to retrieve the following attributes from the svg
		// The viewBox attribute is (*almost*) always "0 0 24 24" so we don't take it
		// Width and height are always 24 so we don't take them
		// x and y attributes are not interesting... 
		// So finally all we want is the path :) 
		const result = {};

		for (icon of icons) {
			const id = regex.exec(icon.getAttribute('id'))[1];
			result[id] = icon.lastElementChild.getAttribute('d');
		}
		
		let stringValue = JSON.stringify(result);
		stringValue = stringValue.substring(1, stringValue.length -1);

		if (counter === source.length) {
			stringValue += '};';
		} else {
			stringValue += ',';
		}
		resultArea.value += stringValue;
	}

	for (let object of source) {
		object.addEventListener('load', () => retrievePaths(object))
	}

</script>
</body>
</html>
